<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<view class="flex1   response  flex flex-wrap justify-start  " style="align-items: center;">
			<view class="flex2  flex-sub   flex flex-wrap justify-between  "
				style="flex-direction: row;align-items: center;">
				<text class="text3 text-bold "> 会议历史</text>
				<!-- <text class="text4 text-xs "> 创建新的会议</text> -->
			</view>
		</view>
		<view class="flex5  bg-white  response  flex  justify-start  " style="flex-direction: column;">
			<view class="flex6   response  flex  justify-start  " style="flex-direction: row;"
				v-if="item.img&&item.img.path" @click="to_meeting_info(item)" v-for="(item,index) in meet_list">
				<image v-if="item.img&&item.img.path" class="picture7  "
					style="width:200rpx;height:200rpx;min-height:unset;" :src="item.img.path">
				</image>
				<view class="flex8    flex  justify-between  "
					style="flex-direction: column;align-content: space-between;height:200rpx;min-height:unset;">
					<view class="flex9   response  flex  justify-between   ">
						<text>{{item.title.slice(0,12)}}...</text>
						<!-- 						<text>组织者:管理员</text>
						<text>纪要:{{item.minutes.slice(0,12)}}...</text>
						<text>出席人员:{{item.attendance[0].role_name}}</text> -->
						<text> 会议时间:{{timestampToDateString(item.start_date)}}</text>
					</view>
					<view class="flex12   response  flex  justify-between  "
						style="flex-direction: row;align-items: center;">
						<text>会议地点:{{item.location}}</text>
						<!-- <text class="text14 text-xs "> {{timestampToDateString(item.start_date)}}</text> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	const db = uniCloud.database()
	let abu_meet_db = db.collection('abu-meet-info,uni-id-roles');
	export default {
		data() {
			return {
				meet_list: [],
			};
		},
		async onLoad() {
			uni.showLoading({
				title: '加载中',
				mask: false
			});

			// 加载会议通知
			await abu_meet_db
				.field("img,attendance{role_name},organizer_user_id,minutes,location,start_date,title").get().then(res => {
					this.meet_list = res.result.data
					console.log(this.meet_list);
				})
			uni.hideLoading()

		},
		methods: {
			to_meeting_info(item) {
				uni.navigateTo({
					url: './meeting_info?id=' + item._id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			timestampToDateString(timestamp) {
				var date = new Date(timestamp);
				// 使用 Date 对象的方法获取年、月、日、时、分等信息
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 月份是从 0 开始的，所以需要加 1
				var day = date.getDate();
				var hours = date.getHours();
				var minutes = date.getMinutes();

				// 将年、月、日、时、分格式化为想要的字符串格式
				var dateString = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day + ' ' +
					(hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;

				return dateString;
			}

		}
	}
</script>

<style lang="less">
	.pageconfig {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		height: 100vh;
	}

	.flex1 {
		width: 100%;
		background-color: #ffffff;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex2 {
		width: 69%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text3 {
		font-size: 36rpx;
	}

	.text4 {
		margin-right: 20rpx;
	}

	.flex5 {
		width: 100%;
		padding-bottom: 15px;
	}

	.flex6 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.picture7 {
		width: 200rpx;
		overflow: hidden;
		height: 200rpx;
	}

	.flex8 {
		width: 70%;
		height: 200rpx;
	}

	.flex9 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-left: 20rpx;
		margin-right: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.text11 {
		padding-top: 2rpx;
		padding-bottom: 2rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.flex12 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.text14 {
		font-weight: 100;
	}

	.flex15 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.picture16 {
		width: 200rpx;
		overflow: hidden;
		height: 200rpx;
	}

	.flex17 {
		width: 70%;
		height: 200rpx;
	}

	.flex18 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.text20 {
		padding-top: 2rpx;
		padding-bottom: 2rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.flex21 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.text23 {
		font-weight: 100;
	}
</style>